<template>
  <div class="notice-edit">
    <el-form ref="addForm" :model="addForm" :rules="addRules">
      <template v-if="showBase">
        <div class="notice-title">模版内容</div>
        <el-form-item label="模板名称" prop="name">
          <el-input :disabled="!editable || config" size="mini" v-model="addForm.name"
                    style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="通知方式" prop="notificeType">
          <el-radio-group :disabled="!editable || config" v-model="addForm.notificeType">
            <el-radio :label="2">飞书个人</el-radio>
            <el-radio :label="0">飞书群</el-radio>
            <!--                <el-radio :label="3">企业微信个人</el-radio>-->
            <el-radio :label="1">企业微信群</el-radio>
          </el-radio-group>
          <el-checkbox disabled v-model="systemNotice" style="margin-left: 20px">系统通知</el-checkbox>
        </el-form-item>
        <!--            <el-col v-if="!edit" span="12">-->
        <!--              <el-button size="small" type="primary" @click="newSaveFeiSHuGroup">获取最新飞书群列表</el-button>-->
        <!--            </el-col>-->
        <el-form-item v-if="showOffer && !config" label="关联订单" prop="offer">
          <el-select size="mini" :disabled="!editable || config" multiple filterable v-model="addForm.offerIds"
                     style="width: 80%" clearable>
            <el-option
              v-for="(item, index) in offerList"
              :key="index"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

      </template>

      <div class="notice-title">通知节点</div>

      <!-- 订单管理-->
      <el-row>
        <el-form-item class="form_item" prop="offerNoticeGroupId">
          <div class="switch_item">
            <span class="switch_group_label">订单管理</span>
            <el-switch :active-value="100" :inactive-value="0" :disabled="!editable" class="switch"
                       v-model="addForm.offerNotice"
                       active-color="#13ce66"
                       inactive-color="#ff4949" @change="toggleOfferFlag"></el-switch>
            <div v-if="showGroup">
              <span class="switch_label">通知群:</span>
              <el-select :disabled="!editable" size="mini" filterable v-model="addForm.offerNoticeGroupId">
                <el-option
                  v-for="(item,index) in getGroupList"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
        <!-- 创建订单-->
        <el-form-item class="form_item">
          <div class="switch_item">
            <span class="switch_label sub_option">状态改变</span>
            <el-switch :active-value="100" :inactive-value="0" :disabled="!offerFlag || !editable"
                       class="switch" v-model="addForm.createStatusAlter" active-color="#13ce66"
                       inactive-color="#ff4949"></el-switch>
            <div>
              <span class="switch_label">抄送</span>
              <el-select :disabled="!editable || addForm.createStatusAlter === 0" multiple size="mini"
                         v-model="addForm.createStatusAlterNoticeRoles">
                <el-option
                  v-for="(item,index) in informRoleList"
                  :key="index"
                  :label="item.roleName"
                  :value="item.roleAlias">
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 编辑订单-->
          <div class="switch_item">
            <span class="switch_label sub_option">编辑订单</span>
            <el-switch :active-value="100" :inactive-value="0" :disabled="!offerFlag || !editable"
                       class="switch" v-model="addForm.offerEdit" active-color="#13ce66"
                       inactive-color="#ff4949"></el-switch>
            <div>
              <span class="switch_label">抄送</span>
              <el-select :disabled="!editable || addForm.offerEdit===0" multiple size="mini"
                         v-model="addForm.offerEditNoticeRoles">
                <el-option
                  v-for="(item,index) in informRoleList"
                  :key="index"
                  :label="item.roleName"
                  :value="item.roleAlias">
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 订单冲突-->
          <div class="switch_item">
            <span class="switch_label sub_option">订单冲突</span>
            <el-switch :active-value="100" :inactive-value="0" :disabled="!offerFlag || !editable" class="switch"
                       v-model="addForm.offerConflict"
                       active-color="#13ce66"
                       inactive-color="#ff4949"></el-switch>
            <div>
              <span class="switch_label">抄送</span>
              <el-select :disabled="!editable || addForm.offerConflict===0" multiple size="mini"
                         v-model="addForm.offerConflictNoticeRoles">
                <el-option
                  v-for="(item,index) in informRoleList"
                  :key="index"
                  :label="item.roleName"
                  :value="item.roleAlias">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
      </el-row>

      <!-- 需求沟通-->
      <el-row>
        <el-form-item class="form_item" prop="requestCommunicateNoticeGroupId">
          <div class="switch_item">
            <span class="switch_group_label">需求沟通</span>
            <el-switch :active-value="100" :inactive-value="0" :disabled="!editable" class="switch"
                       v-model="addForm.requestCommunicate"
                       active-color="#13ce66"
                       inactive-color="#ff4949" @change="toggleRequestFlag"></el-switch>
            <div v-if="showGroup">
              <span class="switch_label">通知群:</span>
              <el-select :disabled="!editable || addForm.requestCommunicate===0" filterable size="mini"
                         v-model="addForm.requestCommunicateNoticeGroupId">
                <el-option
                  v-for="(item,index) in getGroupList"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
        <!-- 创建需求-->
        <el-form-item class="form_item">
          <div class="switch_item">
            <span class="switch_label sub_option">创建需求</span>
            <el-switch :active-value="100" :inactive-value="0" :disabled="!demandFlag || !editable"
                       class="switch" v-model="addForm.requestCreate" active-color="#13ce66"
                       inactive-color="#ff4949"></el-switch>
            <div>
              <span class="switch_label">抄送</span>
              <el-select :disabled="!editable || addForm.requestCreate===0" multiple size="mini"
                         v-model="addForm.requestCreateNoticeRoles">
                <el-option
                  v-for="(item,index) in informRoleList"
                  :key="index"
                  :label="item.roleName"
                  :value="item.roleAlias">
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 分配任务-->
          <div class="switch_item">
            <span class="switch_label sub_option">分配任务</span>
            <el-switch :active-value="100" :inactive-value="0" :disabled="!demandFlag || !editable"
                       class="switch" v-model="addForm.assignTask" active-color="#13ce66"
                       inactive-color="#ff4949"></el-switch>
            <div>
              <span class="switch_label">抄送</span>
              <el-select :disabled="!editable || addForm.assignTask ===0" multiple size="mini"
                         v-model="addForm.assignTaskNoticeRoles">
                <el-option
                  v-for="(item,index) in informRoleList"
                  :key="index"
                  :label="item.roleName"
                  :value="item.roleAlias">
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 上传成品-->
          <div class="switch_item">
            <span class="switch_label sub_option">上传成品</span>
            <el-switch :active-value="100" :inactive-value="0" :disabled="!demandFlag || !editable"
                       class="switch" v-model="addForm.uploadProduct"
                       active-color="#13ce66"
                       inactive-color="#ff4949"></el-switch>
            <div>
              <span class="switch_label">抄送</span>
              <el-select :disabled="!editable || addForm.uploadProduct===0" multiple size="mini"
                         v-model="addForm.uploadProductNoticeRoles">
                <el-option
                  v-for="(item,index) in informRoleList"
                  :key="index"
                  :label="item.roleName"
                  :value="item.roleAlias">
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 制作中素材-->
          <div class="switch_item">
            <span class="switch_label sub_option" style="margin-left:55px;">制作中素材</span>
            <el-switch :active-value="100" :inactive-value="0"
                       class="switch" v-model="addForm.inProduction"
                       active-color="#13ce66"
                       inactive-color="#ff4949" :disabled="!demandFlag || !editable"></el-switch>
            <div>
              <span class="switch_label">抄送</span>
              <el-select size="mini" multiple v-model="addForm.inProductionNoticeRoles"
                         :disabled="!editable || addForm.inProduction === 0">
                <el-option
                  v-for="(item,index) in informRoleList"
                  :key="index"
                  :label="item.roleName"
                  :value="item.roleAlias">
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 成品确认-->
          <div class="switch_item">
            <span class="switch_label sub_option">成品确认</span>
            <el-switch :active-value="100" :inactive-value="0" :disabled="!demandFlag || !editable"
                       class="switch" v-model="addForm.productConfirm"
                       active-color="#13ce66"
                       inactive-color="#ff4949"></el-switch>
            <div>
              <span class="switch_label">抄送</span>
              <el-select :disabled="!editable || addForm.productConfirm ===0" multiple size="mini"
                         v-model="addForm.productConfirmNoticeRoles">
                <el-option
                  v-for="(item,index) in informRoleList"
                  :key="index"
                  :label="item.roleName"
                  :value="item.roleAlias">
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 追加需求-->
<!--          <div class="switch_item">-->
<!--            <span class="switch_label sub_option">追加需求</span>-->
<!--            <el-switch :active-value="100" :inactive-value="0" :disabled="!demandFlag || !editable"-->
<!--                       class="switch" v-model="addForm.requestAdd" active-color="#13ce66"-->
<!--                       inactive-color="#ff4949"></el-switch>-->
<!--            <div>-->
<!--              <span class="switch_label">抄送</span>-->
<!--              <el-select :disabled="!editable || addForm.requestAdd===0" multiple size="mini"-->
<!--                         v-model="addForm.requestAddNoticeRoles">-->
<!--                <el-option-->
<!--                  v-for="(item,index) in informRoleList"-->
<!--                  :key="index"-->
<!--                  :label="item.roleName"-->
<!--                  :value="item.roleAlias">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </div>-->
<!--          </div>-->
          <!--  内容审核      -->
          <div class="switch_item">
            <span class="switch_label sub_option">内容审核</span>
            <el-switch :active-value="100" :inactive-value="0"
                       class="switch" v-model="addForm.requestContentAudit" active-color="#13ce66"
                       inactive-color="#ff4949" :disabled="!demandFlag || !editable"></el-switch>
            <div>
              <span class="switch_label">抄送</span>
              <el-select size="mini" multiple v-model="addForm.requestContentAuditNoticeRoles"
                         :disabled="!editable || addForm.requestContentAudit ===0">
                <el-option
                  v-for="(item,index) in informRoleList"
                  :key="index"
                  :label="item.roleName"
                  :value="item.roleAlias">
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 编辑需求    -->
          <div class="switch_item">
            <span class="switch_label sub_option">编辑需求</span>
            <el-switch :active-value="100" :inactive-value="0"
                       class="switch" v-model="addForm.requestEdit" active-color="#13ce66"
                       inactive-color="#ff4949" :disabled="!demandFlag || !editable"></el-switch>
            <div>
              <span class="switch_label">抄送</span>
              <el-select size="mini" multiple v-model="addForm.requestEditNoticeRoles"
                         :disabled="!editable || addForm.requestEdit ===0">
                <el-option
                  v-for="(item,index) in informRoleList"
                  :key="index"
                  :label="item.roleName"
                  :value="item.roleAlias">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
      </el-row>
      <!-- 素材审核-->
      <el-row>
        <el-form-item class="form_item" prop="creativeAuditNoticeGroupId">
          <div class="switch_item sub_option">
            <span class="switch_group_label">素材审核</span>
            <el-switch :active-value="100" :inactive-value="0" active-color="#13ce66"
                       inactive-color="#ff4949" :disabled="!editable"
                       class="switch" v-model="addForm.creativeAudit" @change="toggleCreativeFlag"></el-switch>
            <div v-if="showGroup">
              <span class="switch_label">通知群:</span>
              <el-select :disabled="!editable || addForm.creativeAudit===0" filterable size="mini"
                         v-model="addForm.creativeAuditNoticeGroupId">
                <el-option
                  v-for="(item,index) in getGroupList"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
        <!-- 提交审核-->
        <el-form-item class="form_item">
          <div class="switch_item">
            <span class="switch_label sub_option">提交审核</span>
            <el-switch :active-value="100" :inactive-value="0" :disabled="!creativeFlag || !editable"
                       class="switch" v-model="addForm.auditSubmit" active-color="#13ce66"
                       inactive-color="#ff4949"></el-switch>
            <div>
              <span class="switch_label">抄送</span>
              <el-select :disabled="!editable || addForm.auditSubmit===0" multiple size="mini"
                         v-model="addForm.auditSubmitNoticeRoles">
                <el-option
                  v-for="(item,index) in informRoleList"
                  :key="index"
                  :label="item.roleName"
                  :value="item.roleAlias">
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 审核结果-->
          <div class="switch_item">
            <span class="switch_label sub_option">审核结果</span>
            <el-switch :active-value="100" :inactive-value="0" :disabled="!creativeFlag || !editable"
                       class="switch" v-model="addForm.auditResult" active-color="#13ce66"
                       inactive-color="#ff4949"></el-switch>
            <div>
              <span class="switch_label">抄送</span>
              <el-select :disabled="!editable || addForm.auditResult===0" multiple size="mini"
                         v-model="addForm.auditResultNoticeRoles">
                <el-option
                  v-for="(item,index) in informRoleList"
                  :key="index"
                  :label="item.roleName"
                  :value="item.roleAlias">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
      </el-row>
      <el-row style="display: flex;justify-content: center">
        <el-button size="mini" @click="close">取 消</el-button>
        <el-button v-if="editable" size="mini" type="primary" @click="submit">保 存</el-button>
      </el-row>
    </el-form>
  </div>

</template>

<script>
import {getList} from "@/api/system/role";
import {getOfferList} from "@/api/business/offer";
import {selectInformGroup} from "@/api/business/thirdpartyconf";
import func from "@/util/func";

export default {
  name: "noticeEdit",
  props: {
    showBase: {
      defaultValue: true,
      type: Boolean
    },
    showOffer: {
      defaultValue: false,
      type: Boolean
    },
    configValue: {
      defaultValue: {},
      type: Object
    },
    /**
     * 是否可编辑
     */
    editable: {
      defaultValue: true,
      type: Boolean
    },
    /**
     * 是否配置
     */
    config: {
      defaultValue: false,
      type: Boolean
    }
  },
  data() {
    return {
      systemNotice: true,
      addForm: {
        id: '',
        name: '',
        notificeType: 0,
        offerIds: [],

        offerNotice: 100,
        offerNoticeGroup: '',
        offerNoticeGroupId: '',
        // offerNoticeRoles: [],

        createStatusAlter: 100,
        createStatusAlterNoticeRoles: [],
        offerEdit: 100,
        offerEditNoticeRoles: [],
        offerConflict: 100,
        offerConflictNoticeRoles: [],

        requestCommunicate: 100,
        requestCommunicateNoticeGroup: '',
        requestCommunicateNoticeGroupId: '',
        requestCreate: 100,
        requestCreateNoticeRoles: [],
        assignTask: 100,
        assignTaskNoticeRoles: [],
        uploadProduct: 100,
        uploadProductNoticeRoles: [],
        productConfirm: 100,
        productConfirmNoticeRoles: [],
        requestAdd: 100,
        requestAddNoticeRoles: [],
        requestContentAudit: 100,
        requestContentAuditNoticeRoles: [],
        requestEdit: 100,
        requestEditNoticeRoles: [],
        inProduction: 100,
        inProductionNoticeRoles: [],

        creativeAudit: 100,
        creativeAuditNoticeGroup: '',
        creativeAuditNoticeGroupId: '',
        auditSubmit: 100,
        auditSubmitNoticeRoles: [],
        auditResult: 100,
        auditResultNoticeRoles: [],
      },
      informRoleList: [],
      offerList: [],
      feishuGroupList: [],
      wechatGroupList: [],

      addRules: {
        name: [{
          required: true, message: '请输入模板名称', trigger: 'blur'
        }],
        notificeType: [{
          required: true, message: '请选择通知方式', validator: (rule, value, callback) => {
            if (value.length === 0 && this.testDome === 1) {
              callback(new Error(''));
            }
            callback();
          }, trigger: 'change'
        }],
        requestCommunicateNoticeGroupId: [{
          required: false, validator: (rule, value, callback) =>{
            if (!value && this.addForm.requestCommunicate ===100){
              console.log('xxxx')
              if (this.showGroup){
                callback(new Error('请选择通知群'));
              }
            }
            callback();
          }, message: '请选择通知群', trigger: 'change'
        }],
        creativeAuditNoticeGroupId: [{
          required: false, validator: (rule, value, callback) =>{
            if (!value && this.addForm.creativeAudit ===100){
              console.log('this',this.required)
              if (this.showGroup) {
                callback(new Error('请选择通知群'));
              }
            }
            callback();
          }, message: '请选择通知群', trigger: 'change'
        }],
        offerNoticeGroupId: [{
          required: false, validator:  (rule, value, callback) =>{
            if (!value && (this.addForm.createStatusAlter ===100 || this.addForm.offerEdit === 100 || this.addForm.offerConflict === 100)){
              if (this.showGroup) {
                callback(new Error('请选择通知群'));
              }
            }
            callback();
          }, message: '请选择通知群', trigger: 'change'
        }]
      },
    }
  },

  created() {
    getList().then(res => {
      this.informRoleList = res.data.data.records
    })

    selectInformGroup('0').then(res => {
      this.feishuGroupList = res.data.data
    });
    selectInformGroup('1').then(res => {
      this.wechatGroupList = res.data.data
    });
  },

  mounted() {
    if (this.showOffer) {
      getOfferList().then(res => {
        this.offerList = res.data.data
      })
    }
  },

  methods: {
    toggleOfferFlag() {
      let flag = this.addForm.offerNotice === 100 ? 100 : 0;
      this.addForm.offerEdit = flag
      this.addForm.offerConflict = flag
      this.addForm.createStatusAlter = flag
      //this.offerFlag = flag === 100
    },
    // 需求沟通全局开关
    toggleRequestFlag() {
      let flag = this.addForm.requestCommunicate === 100 ? 100 : 0;
      this.addForm.requestCreate = flag
      this.addForm.assignTask = flag
      this.addForm.uploadProduct = flag
      this.addForm.productConfirm = flag
      this.addForm.requestAdd = flag
      this.addForm.requestContentAudit = flag
      this.addForm.requestEdit = flag
      this.addForm.inProduction = flag
      //this.demandFlag = flag === 100
    },
    /*素材审核全局开关*/
    toggleCreativeFlag() {
      let flag = this.addForm.creativeAudit === 100 ? 100 : 0;
      this.addForm.auditResult = flag
      this.addForm.auditSubmit = flag
      //this.creativeFlag = flag === 100
    },

    /**
     * 提交
     */
    submit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let data = {
            // offerNoticeRoles: this.addForm.offerNoticeRoles.join(','),
            createStatusAlterNoticeRoles: this.addForm.createStatusAlterNoticeRoles.join(','),
            offerEditNoticeRoles: this.addForm.offerEditNoticeRoles.join(','),
            offerConflictNoticeRoles: this.addForm.offerConflictNoticeRoles.join(','),

            requestCreateNoticeRoles: this.addForm.requestCreateNoticeRoles.join(','),
            assignTaskNoticeRoles: this.addForm.assignTaskNoticeRoles.join(','),
            uploadProductNoticeRoles: this.addForm.uploadProductNoticeRoles.join(','),
            productConfirmNoticeRoles: this.addForm.productConfirmNoticeRoles.join(','),
            requestAddNoticeRoles: this.addForm.requestAddNoticeRoles.join(','),
            requestContentAuditNoticeRoles: this.addForm.requestContentAuditNoticeRoles.join(','),
            requestEditNoticeRoles: this.addForm.requestEditNoticeRoles.join(','),
            inProductionNoticeRoles: this.addForm.inProductionNoticeRoles.join(','),

            auditSubmitNoticeRoles: this.addForm.auditSubmitNoticeRoles.join(','),
            auditResultNoticeRoles: this.addForm.auditResultNoticeRoles.join(','),
          }
          this.getGroupList.forEach(item=>{
            if (item.value == this.addForm.offerNoticeGroupId){
              this.addForm.offerNoticeGroup = item.label;
            }
            if (item.value == this.addForm.requestCommunicateNoticeGroupId){
              this.addForm.requestCommunicateNoticeGroup = item.label;
            }
            if (item.value == this.addForm.creativeAuditNoticeGroupId){
              this.addForm.creativeAuditNoticeGroup = item.label;
            }
          });
          console.log(this.addForm)
          if (this.label === '新增') {
            data['id'] = ''
          }

          this.$emit('submit', Object.assign({}, this.addForm, data));
          this.addForm.offerIds = []
        }
      });

    },

    close() {
      this.$emit('close');
    },

    /**
     * 编辑
     */
    update(newData) {
      console.log(newData);
      let data = {
        // offerNoticeRoles: func.toList(this.addForm.offerNoticeRoles),
        createStatusAlterNoticeRoles: func.toList(newData.createStatusAlterNoticeRoles),
        offerEditNoticeRoles: func.toList(newData.offerEditNoticeRoles),
        offerConflictNoticeRoles: func.toList(newData.offerConflictNoticeRoles),
        requestCreateNoticeRoles: func.toList(newData.requestCreateNoticeRoles),
        assignTaskNoticeRoles: func.toList(newData.assignTaskNoticeRoles),
        uploadProductNoticeRoles: func.toList(newData.uploadProductNoticeRoles),
        productConfirmNoticeRoles: func.toList(newData.productConfirmNoticeRoles),
        requestAddNoticeRoles: func.toList(newData.requestAddNoticeRoles),
        auditSubmitNoticeRoles: func.toList(newData.auditSubmitNoticeRoles),
        auditResultNoticeRoles: func.toList(newData.auditResultNoticeRoles),
        requestContentAuditNoticeRoles: func.toList(newData.requestContentAuditNoticeRoles),
        requestEditNoticeRoles: func.toList(newData.requestEditNoticeRoles),
        inProductionNoticeRoles: func.toList(newData.inProductionNoticeRoles),
      }
      Object.assign(this.addForm, newData);
      Object.assign(this.addForm, data);
    },

    // changeInformGroup() {
    //   if (this.addForm.notificeType === 0 || this.addForm.notificeType === 1) {
    //     this.addForm.offerNoticeGroup = '';
    //     this.addForm.requestCommunicateNoticeGroup = '';
    //     this.addForm.creativeAuditNoticeGroup = '';
    //     this.getInformGroup(this.addForm.notificeType);
    //   }
    // },

    // getInformGroup(parameter) {
    //   selectInformGroup(parameter).then(res => {
    //     this.informGroupList = res.data.data
    //   })
    // },

  },

  computed: {
    offerFlag() {
      return this.addForm.offerNotice === 100;
    },
    demandFlag() {
      return this.addForm.requestCommunicate === 100;
    },
    creativeFlag() {
      return this.addForm.creativeAudit === 100;
    },
    /**
     * 是否显示群选择
     * @returns {boolean}
     */
    showGroup() {
      const notificeType = this.addForm.notificeType;
      const isGroup = notificeType == 0 || notificeType == 1;
      return isGroup && this.config;
    },

    getGroupList() {
      if (this.addForm.notificeType == 0) {
        return this.feishuGroupList;
      } else if (this.addForm.notificeType == 1) {
        return this.wechatGroupList;
      } else {
        return [];
      }
    }
  },

  watch: {
    configValue: {
      handler(val, oldVal) {
        if (val) {
          this.update(val)
        }
      },
      deep: true,
      immediate: true
    }
  }

}
</script>

<style scoped lang="scss">
.notice-title {
  margin-left: 10px;
  margin-bottom: 20px;
  font-weight: 500;
}

.notice-edit {
  padding: 20px 20px 20px 20px;

  &-title {
    font-size: 16px;
    margin: 10px 0;
  }
}

.form_item {
  //padding-left: 10px;
}

.switch_item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;

  .switch {
    padding: 0 20px;
  }

  .switch_group_label {

  }

  .switch_label {
    color: #666;
    margin-right: 20px;
  }

  .sub_option {
    color: #000;
    margin-left: 5em;
  }
}
</style>
